<template>
  <div>
    <JobForm
      ref="child"
      v-if="showResult === false"
      type="add"
      :enable_addjob_num="enable_addjob_num"
      :enable_addjob_num_total="enable_addjob_num_total"
      @submit="submit"
    ></JobForm>
    <div class="success" v-if="showResult === true">
      <el-card>
        <div class="success_text"><span>发布职位成功</span></div>
        <p>推荐使用职位置顶，立即提升招聘效果</p>
        <div class="btns_wrapper">
          <el-button type="primary" @click="$router.push('/company')">会员中心</el-button>
          <el-button @click="addAgain">再发一条</el-button>
          <el-button @click="$router.push('/company/joblist')">职位管理</el-button>
        </div>
        <div class="Topping_con" v-if="result_audit == 1">
          <div class="Topping_left">
            <p @click="handlerService(2)">置顶职位 <span>信息黄金位置展示，曝光率提升</span> <a>10倍 </a></p>
            <div class="Topping_days_con">
              <div v-for="(item, index) in result_service_list" :key="index" @click="handlerService(item.id)">
                {{ item.days }}天
                <span v-if="item.recommend==1" class="recommend">推荐<i></i> </span>
              </div>
            </div>
          </div>
          <div class="Topping_right">
            <span></span>
            <div>
              <p>置顶效果</p>
              <div class="Topping_effect">
                <div class="Topping_box">
                  <div class="Topping_box_bg1"></div>
                </div>
                <div class="Topping_line">
                  <div class="Topping_box_bg1"></div>
                  <div class="Topping_box_bg1"></div>
                  <div class="Topping_box_bg1"></div>
                </div>
              </div>

              <div class="Topping_effect">
                <div class="Topping_box">
                  <div class="Topping_box_bg2"></div>
                </div>
                <div class="Topping_line">
                  <div class="Topping_box_bg2"></div>
                  <div class="Topping_box_bg2"></div>
                  <div class="Topping_box_bg2"></div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </el-card>
    </div>
    <el-dialog :title="'购买'+serviceTitle" :visible.sync="showBuyService" width="540px" @opened="initBuyService">
      <BuyIncrementDialog :job-id="result_id" :service-id="serviceId" ref="buyService" @submitPay="submitPay"
                          :type="serviceType"></BuyIncrementDialog>
    </el-dialog>
    <el-dialog title="支付提醒" :visible.sync="showWaitingPay" width="400px">
      <span class="payment_text">请在新打开的页面上完成支付。支付完成后，请根据您支付的情况点击下面按钮。</span>
      <span slot="footer" class="dialog-footer">
			<el-button type="primary" @click="handlerPaySuccess">支付成功</el-button>
			<el-button @click="handlerPayFail">支付失败</el-button>
			</span>
    </el-dialog>

    <!-- 微信二维码弹窗 start -->
    <WeChatQrcode ref="weChatQrcodeRef"></WeChatQrcode>
    <!-- 微信二维码弹窗 end -->
  </div>
</template>

<script>
import BuyIncrementDialog from '@/components/company/service/BuyIncrementDialog.vue'
import JobForm from '@/components/company/JobForm'
import http from '@/utils/http'
import api from '@/api'
import WeChatQrcode from '@/components/WeChatQrcode'
export default{
  components: {
    JobForm,
    BuyIncrementDialog,
    WeChatQrcode
  },
  data(){
    return{
      showWaitingPay:false,
      showBuyService:false,
      serviceTitle:'',
      serviceType:'',
      serviceId:0,
      showResult: false,
      result_id: 0,
      result_audit: 0,
      result_service_list: [],
      enable_addjob_num_total: 0,
      enable_addjob_num: 0
    }
  },
  created () {
    this.fetchData()
  },
  methods:{
    addAgain () {
      http
        .get(api.company_check_jobadd_num, {})
        .then(res => {
          this.enable_addjob_num = res.data.enable_addjob_num
          this.enable_addjob_num_total = res.data.enable_addjob_num_total
          if (this.enable_addjob_num <= 0) {
            this.$confirm('您当前可发布职位数为0，建议您立即升级套餐或将暂时不招聘的职位设为关闭！', '系统提示', {
              confirmButtonText: '升级套餐',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(() => {
                this.$router.push('/company/service/setmeal')
              })
              .catch(() => {
                // on cancel
              })
            return false
          } else {
            this.showResult = !this.showResult
          }
        })
        .catch(() => {
        })
    },
    fetchData () {
      http
        .get(api.company_check_jobadd_num, {})
        .then(res => {
          this.enable_addjob_num = res.data.enable_addjob_num
          this.enable_addjob_num_total = res.data.enable_addjob_num_total
        })
        .catch(() => {})
      http
        .get(api.company_jobadd_pre, {})
        .then(res => {
          this.$refs.child.field_rule = res.data.field_rule
        })
        .catch(() => {})
    },
    submit (values) {
      http
        .post(api.company_jobadd_save, values)
        .then(res => {
          this.result_id = res.data.id
          this.result_audit = [...res.data.audit]
          this.result_service_list = [...res.data.service_stick_list]
          this.showResult = true
          /**
           * 【ID1000719】
           * 【新增】公众号引导弹窗场景（发布职位）
           * cy 2023-7-17
           */
          this.popupWechatQrcodeWindow('company_pc_save_job')
        })
        .catch(() => {})
    },
    handlerService(service_id){
      this.serviceId = service_id
      this.serviceTitle = '职位置顶'
      this.serviceType = 'jobstick'
      this.showBuyService = true
    },
    initBuyService(){
      this.$refs.buyService.initCB()
    },
    submitPay(isFinish){
      this.showBuyService = false
      if(isFinish===true){
        this.showResult = false
        this.$router.push('/company/joblist')
      }else{
        this.showWaitingPay = true
      }
    },
    handlerPaySuccess(){
      this.showWaitingPay = false
      this.$router.push('/company/joblist')
    },
    handlerPayFail(){
      this.showWaitingPay = false
      this.showResult = false
    },
    // 弹出微信二维码弹框
    popupWechatQrcodeWindow(val) {
      this.$refs.weChatQrcodeRef.handleOpen(val, '扫码绑定，随时随地接收简历信息')
    }
  },
}
</script>

<style lang="scss" scoped>
// 发布成功
.success {
  height: 670px;
  text-align: center;
}

.success .el-card {
  height: 100%;
}

.success_text {
  margin: 190px auto 0;
  padding-left: 66px;
  background: url("../../assets/images/bigSuccess.png") 0 center no-repeat;
  background-size: 50px 50px;
  height: 50px;
  line-height: 50px;
  width: fit-content;
}

.success_text span {
  color: #333333;
  font-size: 29px;
}

.el-card p {
  color: #333333;
  font-size: 18px;
  margin-top: 10px;
}

.btns_wrapper {
  margin-top: 48px;
}

.btns_wrapper .el-button {
  width: 180px;
  height: 42px;
  margin-right: 30px;
  margin-left: 0;
  // background: #1787fb;
}

.Topping_con {
  display: flex;
  width: 1050px;
  background: #fefce8;
  height: 150px;
  border: 1px solid #ffe6b5;
  margin: 40px auto;
}

.Topping_left {
  width: 630px;
}

.Topping_left p {
  font-size: 18px;
}

.Topping_left p span {
  font-size: 14px;
  color: #666666;
}

.Topping_left p a {
  color: #ff4646;
  font-size: 14px;
}

.Topping_con > div {
  padding: 20px;
}

.Topping_days_con {
  display: flex;
  margin-top: 30px;
}

.Topping_con div p {
  margin-top: 10px;
  text-align: left;
}

.Topping_days_con > div {
  width: 100px;
  height: 38px;
  border: 1px solid #e2e2e2;
  line-height: 38px;
  text-align: center;
  margin-right: 20px;
  background: #fff;
  font-size: 14px;
  color: #666666;
  position: relative;
  cursor: pointer;
}

.recommend {
  width: 34px;
  height: 18px;
  background: #ff3030;
  position: absolute;
  right: -10px;
  top: -13px;
  line-height: 18px;
  font-size: 12px;
  color: #ffebeb;
  border-radius: 8px;
}

.recommend i {
  border-width: 0 0 5px 5px;
  border-style: solid;
  border-color: transparent transparent red;
  position: absolute;
  right: 10px;
  bottom: -5px;
  transform: rotate(170deg);
}

.Topping_right {
  flex: 1;
  display: flex;
}

.Topping_right span {
  display: inline-block;
  height: 90px;
  width: 1px;
  background: #e2e2e2;
  margin-right: 60px;
  margin-top: 14px;
}

.Topping_right p {
  color: #ff803b;
  font-size: 14px;
  padding-bottom: 5px;

}

.btn_wrapper {
  text-align: center;
}

.btn_wrapper .el-button {
  width: 260px;
  height: 42px;
  margin-top: 50px;
  margin-bottom: 20px;
}

.Topping_effect {
  display: flex;
  margin: 15px 0;
}

.Topping_box div {
  width: 30px;
  height: 20px;
}

.Topping_box_bg1 {
  background: #ffe6b5;
}

.Topping_box_bg2 {
  background: #e2e2e2;
}

.Topping_effect .Topping_line {
  width: 240px;
  height: 20px;
  margin-left: 15px;
}

.Topping_line div:nth-of-type(1) {
  height: 5px;
  margin-bottom: 6px;
}

.Topping_line div:nth-of-type(2),
.Topping_line div:nth-of-type(3) {
  height: 2px;
}

.Topping_line div:nth-of-type(2) {
  margin-bottom: 4px;
}
</style>
